<div class="NavBar">{{NavBar}}</div>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'NavBar',
    el:'#NavBar',
    render: function (h) {
      // let ret = []

      // this.routers.forEach((router) => {
      //   let ElMenuI = null
      //   let ElMenuItem = null
      //   let ElMenuItemS = null
      //   if (router.children) {
      //     ElMenuItemS = Array.from(router.children, (children) => {
      //       return h('el-menu-item', {
      //         props: {
      //           index: children.index
      //         }
      //       }, children.title)
      //     })
      //   } else {
      //     ElMenuItem = h('el-menu-item', {
      //       props: {
      //         index: router.index
      //       }
      //     }, router.title)
      //   }

      //   ElMenuItemS ? ElMenuI = h('el-submenu', {
      //       props: {
      //         index: router.title
      //       }
      //     }, [h('span', { slot: 'title' },router.title), ...ElMenuItemS]) : ElMenuI = ElMenuItem

      //   ret.push(ElMenuI)
      // })

      const ElMenuWrapper = this.childrenVNode(this.routers, h);

      return h('el-menu', {attrs:{uniqueOpened:'unique-opened'}}, ElMenuWrapper);
    },
    computed: mapState({
        routers: state => state.emergencyDispatch
    }),
    methods: {
      childrenVNode(routers, h) {
        return Array.from(routers, (router) => {
          if (router.children) {
            const ElSubMenu = h('el-submenu', {
              props: {
                index: router.index
              }
            }, [
              h('span', {
                slot: 'title'
              }, router.title),
              ...this.childrenVNode(router.children, h)
            ]);

            return ElSubMenu
          } else {
            const ElMenuItem = h('el-menu-item', {
              props: {
                index: router.index
              }
            }, router.title);

            return ElMenuItem
          }
        })
      }
    }
  }
</script>

<style>

</style>
